import React,{Component} from 'react';
import { View , Text,TouchableOpacity } from 'react-native';
import SvgUri from 'react-native-svg-uri'
import {makefriend,address,brain} from '../../../res/fonts/svg'
import { pxToDp } from '../../../utils/stylesKits';
import { NavigationContext} from '@react-navigation/native'
    class Index extends Component{
        static contextType = NavigationContext
        goPage = (page) =>{
            this.context.navigate(page)
        }
        render(){
            return(
                <View style={{flexDirection:"row",width:"80%",justifyContent:"space-around"}}>
                    <TouchableOpacity style={{alignItems:"center"}} onPress={()=>this.goPage('Tanhua')} >
                        <View style={{width:pxToDp(70),height:pxToDp(70),borderRadius:pxToDp(35),backgroundColor:"red",justifyContent:"center",alignItems:"center"}}>
                            <SvgUri width="40" height="40" fill="#fff" svgXmlData={makefriend} />
                        </View>
                        <Text style={{fontSize:pxToDp(18),marginTop:pxToDp(4),color:"#ffffff9a"}}>探花</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{alignItems:"center"}} onPress={()=>this.goPage('Search')}>
                        <View style={{width:pxToDp(70),height:pxToDp(70),borderRadius:pxToDp(35),backgroundColor:"#2db3f8",justifyContent:"center",alignItems:"center"}}>
                            <SvgUri width="40" height="40" fill="#fff" svgXmlData={address} />
                        </View>
                        <Text style={{fontSize:pxToDp(18),marginTop:pxToDp(4),color:"#ffffff9a"}}>搜附近</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={{alignItems:"center"}} onPress={()=>this.goPage('Textsoul')}>
                        <View style={{width:pxToDp(70),height:pxToDp(70),borderRadius:pxToDp(35),backgroundColor:"#ecc768",justifyContent:"center",alignItems:"center"}}>
                            <SvgUri width="40" height="40" fill="#fff" svgXmlData={brain} />
                        </View>
                        <Text style={{fontSize:pxToDp(18),marginTop:pxToDp(4),color:"#ffffff9a"}}>测灵魂</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }
export default Index;